import React from 'react'
import { Carousel, Flex, WingBlank, Toast } from 'antd-mobile';
import './index.scss'
import SearchHeader from '../../components/SearchHeader/index'
// 导入图片
import Nav1 from '../../assets/images/nav-1.png';
import Nav2 from '../../assets/images/nav-2.png';
import Nav3 from '../../assets/images/nav-3.png';
import Nav4 from '../../assets/images/nav-4.png';
import axios from '../../utils/https'

export default class profile extends React.Component {
    state = {
        imgHeight: '176px',
        swipers: [],
        homeGroups: [],
        isflag: false,   //解决轮播图不能播放的问题
        news: [],
        cityInfo: {}
    }

    //挂载完调用方法
    componentDidMount() {
        this.getSwipersData()
        this.getNavData()
        this.getNews()
        this.getCity()
    }

    //获取定位当前城市数据
    async getCity() {
        let curCityInfo = JSON.parse(localStorage.getItem('cityInfo'))
        if (curCityInfo) {
            this.setState({
                cityInfo: curCityInfo
            })
        } else {
            // 定义一个IP定位的地图实例
            let myCity = new window.BMap.LocalCity();
            // 将获取到地区作为参数发送
            new Promise(resolve => {
                myCity.get(res => {
                    resolve(res)
                })
            }).then(async res => {
                let name = res.name
                await axios({
                    url: 'area/info',
                    params: { name }
                }).then(res => {
                    console.log(res, 'qijg');
                    this.setState({
                        cityInfo: res.data.body
                    })
                    //存储定位
                    localStorage.setItem('cityInfo', JSON.stringify(res.data.body))
                }).catch(err => {
                    console.dir(err);
                    Toast.fail('没有定位到当前城市')
                })
            })
        }

    }
    //获取轮播图数据
    async getSwipersData() {
        const res = await axios.get('home/swiper');
        this.setState({
            swipers: res.data.body,
            isflag: true
        });
    }
    //获取租房小组数据
    async getNavData() {
        const res = await axios.get('home/groups');
        console.log(res);

        this.setState({
            homeGroups: res.data.body
        });

    }
    //获取最新资讯数据
    async getNews() {
        let { data: res } = await axios.get('home/news?area=AREA%7C88cff55c-aaa4-e2e0')
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            news: res.body
        })
    }
    //封装渲染区的最新资讯
    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={`${axios.defaults.baseURL + item.imgSrc}`}
                            alt=""
                        />
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }
    //渲染页面区域
    render() {
        return (
            <div className="index">
                {/* 轮播图+导航栏 */}
                <div className="Carousel">
                    {this.state.isflag ? <div>
                        <Carousel
                            autoplay={true}
                            infinite
                        >
                            {this.state.swipers.map((item, index) => (
                                <a key={index}
                                    href="http://itcast.cn/"
                                    style={{ display: 'inline-block', width: '100%', height: 212 }}>
                                    <img

                                        src={`${axios.defaults.baseURL + item.imgSrc}`}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                        }}
                                    />
                                </a>
                            ))}
                        </Carousel>
                        <SearchHeader
                            cityInfo={this.state.cityInfo.label}></SearchHeader>

                    </div> : ''}
                </div>
                {/* 导航区 */}
                <div className="nav">
                    <ul>
                        <li>
                            <div className="img">
                                <img src={Nav1} alt="" />
                            </div>
                            <p>整租</p>
                        </li>
                        <li>
                            <div className="img">
                                <img src={Nav2} alt="" />
                            </div>
                            <p>合租</p>
                        </li>
                        <li>
                            <div className="img">
                                <img src={Nav3} alt="" />
                            </div>
                            <p>地图找房</p>
                        </li>
                        <li>
                            <div className="img">
                                <img src={Nav4} alt="" />
                            </div>
                            <p>去出租</p>
                        </li>
                    </ul>
                </div>
                {/* 租房小组 */}
                <div className="zufang">
                    <div className="title">
                        <div>租房小组</div>
                        <div className="grey">更多</div>
                    </div>
                    <ul className="content">
                        {
                            this.state.homeGroups.map(item => (
                                <li key={item.id}>
                                    <div className="left">
                                        <p>{item.desc}</p>
                                        <p className="grey">{item.title}</p>
                                    </div>
                                    <div className="right">
                                        <img src={`${axios.defaults.baseURL + item.imgSrc}`} alt="" />
                                    </div>

                                </li>
                            ))
                        }
                    </ul>
                </div>
                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>
        )
    }
}